<html lang='zh-CN'>
<head>
<meta charset='utf-8'>
	<style>
	.message {
		margin: 100px;
	}
	
	.comment textarea {
		width: 200px;
		height: 200px;
	}
	
	.item {
		background-color: pink;
		color: white;
		margin: 10px;
	}
	
	.delete {
		position: relative;
		float: right;
	}
		
	</style>
</head>

<body>
	<span class='message'>
		<span class='comment'>
			<textarea></textarea>
			<button>submit</button>
		</span>
		<span class='content'>
		</span>
	<span>
</body>

<script>
	var submit = document.getElementsByClassName('comment')[0].lastElementChild;
	submit.onclick = function () {
        // 获取兄弟element对象
		var content = submit.previousElementSibling.value+'<button class="delete">delete</button>';
		var area = submit.parentNode.nextElementSibling;
		var newNode = document.createElement('p');
        // innerHTML 用字符串生成element对象
		newNode.innerHTML = content;
		newNode.className = 'item'
        // createElement 创建新element对象，然后指定添加到哪个childNode
		area.appendChild(newNode);
		submit.previousElementSibling.value='';
		// 生成新element时，就注册点击事件实现删除指定节点的功能
		newNode.onclick = function() {
			this.parentNode.removeChild(this);
		}
	}
	
</script>
</html>